<template>
    <div>
        <div class="demo-image">
            <div class="block">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="fit in tableData" :key="fit">
                        <div class="health-code">
                            <div class="data-time">
                                <span class="date" v-text="date"></span>
                                &nbsp;&nbsp;<span class="time" v-text="time"></span>
                            </div>
                            <div class="data-imsi">
                                <span class="imsi" v-text="fit.imsi"></span>
                            </div>
                            <div class="data-acidtest-result">
                                <span class="acidtest_result"
                                      v-if="fit.acidtestResult != null && fit.acidtestResult != ''"
                                      v-text="fit.acidtestResult"></span>
                                <span class="acidtest_result" v-else>暂无</span>
                            </div>
                            <div class="data-vaccination">
                                <span class="vaccination" v-if="fit.vaccination != null && fit.vaccination != ''"
                                      v-text="fit.vaccination"></span>
                                <span class="vaccination" v-else>暂无</span>
                            </div>
                            <div class="data-acidtest-time">
                                <span class="acidtest-time" v-text="fit.acidtestTime"></span>
                            </div>
                            <div class="data-error-code">
                                <span class="error-code"
                                      v-if="fit.healthcodeState == 'O'">未获取到有效数据</span>
                            </div>
                            <el-image
                                    style="width: 100%"
                                    :src="fit.healthcodeState == 'G' ? greenUrl : fit.healthcodeState == 'R' ? redUrl : fit.healthcodeState == 'Y' ? yellowUrl : errorUrl"
                            ></el-image>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

import
<script>
    export default {
        name: "Monitor",
        data() {
            return {
                time: '',
                date: '',
                tableData: [],
                greenUrl: require("@/assets/healthcode_state_green.png"),
                redUrl: require("@/assets/healthcode_state_red.png"),
                yellowUrl: require("@/assets/healthcode_state_yellow.png"),
                errorUrl: require("@/assets/healthcode_state_error.png")
            }
        },
        created() {
            this.healthCodeInfo()
        },
        mounted() {
            setInterval(this.updateTime, 1000);
            this.updateTime();

            if (this.timer) {
                clearInterval(this.timer)
            } else {
                this.timer = setInterval(() => {
                    this.healthCodeInfo()
                }, 1000 * 30)
            }
        },
        destroyed() {
            clearInterval(this.timer)
        },
        methods: {
            zeroPadding(num, digit) {
                var zero = '';
                for (var i = 0; i < digit; i++) {
                    zero += '0';
                }
                return (zero + num).slice(-digit);
            },
            updateTime() {
                var cd = new Date();
                this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
                this.date = this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2);
            },
            healthCodeInfo() {
                this.$axios.post("/device/data/getDate", null)
                    .then(res => {
                        this.tableData = res.data.data
                        console.log('data', this.tableData)
                    })
            }
        }
    }
</script>

<style scoped>
    .health-code {
        position: relative;
    }

    .health-code .data-time {
        position: absolute;
        top: 90px;
        z-index: 9;
        left: 68px;
    }

    .health-code .data-imsi {
        position: absolute;
        top: 22px;
        z-index: 9;
        left: 58px;
    }

    .health-code .data-acidtest-result {
        position: absolute;
        top: 322px;
        z-index: 9;
        left: 52px;
    }

    .health-code .data-vaccination {
        position: absolute;
        top: 322px;
        z-index: 9;
        left: 158px;
    }

    .health-code .data-acidtest-time {
        position: absolute;
        top: 350px;
        z-index: 1;
        left: 28px;
        font-size: 8px;
    }

    .health-code .data-error-code {
        position: absolute;
        top: 170px;
        z-index: 1;
        left: 74px;
        font-size: 12px;
    }
</style>